<template>
  <el-container>
    <el-header><Header></Header></el-header>
    <el-container v-show="isAdmin">
      <el-aside style="width: 15%;background-color: #ffffff;">
        <el-menu default-active="2" class="el-menu-vertical-demo">
          <el-menu-item>
            <el-button @click="type1()" style="color:deeppink" type="text">用户列表({{ count1 }})</el-button>
          </el-menu-item>
          <el-menu-item>
            <el-button @click="type2()" style="color:deeppink" type="text">订单列表({{ count2 }})</el-button>
          </el-menu-item>
          <el-menu-item>
            <el-button @click="type3()" style="color:deeppink" type="text">文件列表({{ count3 }})</el-button>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <div class="home-box">
        <el-row :gutter="10">
          <el-col

          :xs="24" :sm="10" :md="24" :lg="24" :offset="1">
            <el-table v-show="show1" :data="tableData" style="width: 100%">
              <el-table-column prop="username" label="用户名" width="180"></el-table-column>
              <el-table-column prop="phone" label="手机号码" width="150"></el-table-column>
              <el-table-column prop="qqEmail" label="QQ号码" width="150"></el-table-column>
              <el-table-column prop="createTime" label="创建时间" width="100"></el-table-column>
              <el-table-column prop="updateTime" label="更新时间" width="100"></el-table-column>
              <el-table-column >
                <template slot-scope="scope">
                  <el-button size="mini" type="primary" @click="excel1(scope.$index, scope.row)" icon="el-icon-position">导出</el-button>
                  <el-button size="mini" type="danger" @click="del1(scope.$index, scope.row)" icon="el-icon-delete">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-table v-show="show2" :data="tableData" style="width: 100%">
              <el-table-column prop="orderId" label="订单号" width="180"></el-table-column>
              <el-table-column prop="goodName" label="资料名称" width="250"></el-table-column>
              <el-table-column prop="orderType" label="订单类型" width="100"></el-table-column>
              <el-table-column prop="price" label="价格" width="70"></el-table-column>
              <el-table-column>
                <template slot-scope="scope">
                  <el-button size="mini" type="danger" @click="del2(scope.$index, scope.row)" icon="el-icon-delete">取消</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-table v-show="show3" :data="tableData" style="width: 100%">
              <el-table-column prop="fileName" label="文件名" width="180"></el-table-column>
              <el-table-column prop="ext" label="文件类型" width="250"></el-table-column>
              <el-table-column prop="pwd" label="文件密码" width="100" ></el-table-column>
              <el-table-column prop="createTime" label="创建时间" width="100"></el-table-column>
              <el-table-column prop="updateTime" label="更新时间" width="100"></el-table-column>
              <el-table-column>
                <template slot-scope="scope">
                  <el-button size="mini" type="warning" @click="edit(scope.$index, scope.row)" icon="el-icon-edit">编辑</el-button>
                  <el-button size="mini" type="danger" @click="del3(scope.$index, scope.row)" icon="el-icon-delete">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row>
           <el-col :xs="24" :sm="10" :md="12" :lg="12" :offset="1">
              <el-button v-show="show1" size="mini" type="warning" plain @click="excelUser()" icon="el-icon-document">导出用户列表</el-button>
           </el-col>
         </el-row>
        <el-row>
          <el-col :xs="24" :sm="10" :md="12" :lg="12" :offset="4">
            <el-pagination
              v-show="load"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 15]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="this.total"
            ></el-pagination>
          </el-col>
        </el-row>
      </div>
    </el-container>
    <el-footer><Footer></Footer></el-footer>
  </el-container>
</template>

<script>
import Footer from '@/components/Footer';
import Header from '@/components/Header';
import fileDownload from 'js-file-download';
export default {
  data() {
    return {
      isAdmin: this.$store.getters.getUser().isAdmin,
      show1: true,
      show2: false,
      show3: false,
      count1: 0,
      count2: 0,
      count3: 0,
      typeId: 1,
      load: true,
      load2: false,
      tableData: null,
      current: 1,
      size: 5,
      currentPage: 1,
      pageSize: 5,
      total: null,
      userId: this.$store.getters.getUser().userId,
      file: null,
      goodId: null
    };
  },
  // 组件声明
  components: {
    Footer: Footer,
    Header: Header
  },
  created() {
    this.findAll(), this.findCount1(), this.findCount2(), this.findCount3();
  },
  methods: {
    findAll() {
      let _this = this;
      if (this.typeId == 1) {
        this.axios
          .get(this.apiUrl2 + '/user/findAll?current=' + this.current + '&size=' + this.size)
          .then(res => {
            _this.tableData = res.data.userPage;
            _this.total = res.data.total;
            _this.load = true;
          })
          .catch(err => {
            console.log(err);
          });
      }
      if (this.typeId == 2) {
        this.axios
          .get(this.apiUrl1 + '/order/findAll?current=' + this.current + '&size=' + this.size)
          .then(res => {

            _this.tableData = res.data.ordersPage;
            _this.total = res.data.total;
            _this.load = true;
          })
          .catch(err => {
            console.log(err);
          });
      }
      if (this.typeId == 3) {
        this.axios
          .get(this.apiUrl5
           + '/file/findAll?current=' + this.current + '&size=' + this.size)
          .then(res => {
            _this.tableData = res.data.filePage;
            _this.total = res.data.total;
            _this.load = true;
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    findCount1() {
      let _this = this;
      this.axios
        .get(this.apiUrl2 + '/user/findCount1')
        .then(res => {
          _this.count1 = res.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    findCount2() {
      let _this = this;
      this.axios
        .get(this.apiUrl1 + '/order/findCount1')
        .then(res => {
          _this.count2 = res.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    findCount3() {
      let _this = this;
      this.axios
        .get(this.apiUrl5 + '/file/findCount1')
        .then(res => {
          _this.count3 = res.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    type1() {
      (this.current = 1),(this.typeId = 1), (this.show1 = true), (this.show2 = false), (this.show3 = false),this.findAll();
    },
    type2() {
      (this.current = 1),(this.typeId = 2), (this.show2 = true), (this.show1 = false), (this.show3 = false),this.findAll();
    },
    type3() {
      (this.current = 1),(this.typeId = 3), (this.show3 = true), (this.show1 = false), (this.show2 = false),this.findAll();
    },

    download(index, row) {
      var goodId = row.goodId;

      var goodName = row.goodName;
      let _this = this;
      // 利用a标签自定义下载文件名
      const link = document.createElement('a');
      var formData = new FormData();
      formData.append('goodId', row.goodId);
      formData.append('orId', row.orId);
      formData.append('orderId', row.orderId);
      formData.append('goodName', row.goodName);

      this.axios.post(this.apiUrl5 + '/file/download', formData, { responseType: 'arraybuffer' }).then(res => {
        let blob = new Blob([res.data], { type: 'application/zip' });
        let objectUrl = URL.createObjectURL(blob);
        link.href = objectUrl;
        link.download = goodName;
        link.click();
        URL.revokeObjectURL(objectUrl);
      });
    },
    excel1(index, row) {

      let _this = this;
      this.axios.get(this.apiUrl2 + '/user/export?userId='+row.userId, { responseType: "blob" })
             .then((res) => {

               const blob = new Blob([res.data], { //取响应回来的数据
                           type: "application/vnd.ms-excel;charset=utf-8",
                         });
                         const href = window.URL.createObjectURL(blob); // 创建下载的链接
                         const downloadElement = document.createElement("a");
                         downloadElement.href = href;
                         downloadElement.download = '用户列表';
                         document.body.appendChild(downloadElement);
                         downloadElement.click(); // 点击下载
                         document.body.removeChild(downloadElement); // 下载完成移除元素
                         window.URL.revokeObjectURL(href); // 释放掉blob对象
             })
             .catch((fail) => {
               console.error(fail);
             });
    },
    excelUser() {
      let _this = this;
       this.axios.get(this.apiUrl2+'/user/export2', { responseType: "blob" })
             .then((res) => {

               const blob = new Blob([res.data], { //取响应回来的数据
                           type: "application/vnd.ms-excel;charset=utf-8",
                         });
                         const href = window.URL.createObjectURL(blob); // 创建下载的链接
                         const downloadElement = document.createElement("a");
                         downloadElement.href = href;
                         downloadElement.download = '用户列表';
                         document.body.appendChild(downloadElement);
                         downloadElement.click(); // 点击下载
                         document.body.removeChild(downloadElement); // 下载完成移除元素
                         window.URL.revokeObjectURL(href); // 释放掉blob对象
             })
             .catch((fail) => {
               console.error(fail);
             });
    },

    del1(index, row) {
      console.log(index, row);
    },
    del2(index, row) {
      console.log(index, row);
    },
    del3(index, row) {
      console.log(index, row);

      let _this = this;
      this.axios.get(this.apiUrl3 + '/file/delFile?fileId=' + row.fileId).then(res => {
        if (res.data.status) {
          _this.findAll(),
            _this.findCount3(),
            _this.$message({
              message: res.data.msg,
              type: 'success'
            });
        } else {
          this.$message({
            message: res.data.msg,
            type: 'warning'
          });
        }
      });
    },
    handleSizeChange: function(pageSize) {
      (this.size = pageSize), this.findAll();
    },
    handleCurrentChange: function(currentPage) {
      (this.current = currentPage), this.findAll();
    }
  }
};
</script>

<style>
.home-box {
  width: 100%;
  padding: 2px;
  float: right;
  /*  margin: 100px auto; */
  padding: 20px 50px 10px 10px;
  border: 1px solid #ffffff;
  /* background-image: url(../../static/zm1.jpg); */
}
.el-header,
.el-footer {
  /*  background-color: #B3C0D1; */
  /* background-image: url(../../static/zm6.jpg); */
  /*  color: #333; */
  /* text-align: center; */
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  line-height: 50px;
}

.el-aside {
  color: #333;
  text-align: center;
  /* line-height: 200px; */
  height: 650px;
}

.el-main {
  color: #333;
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  /*  background: #99a9bf; */
}
.bg-purple {
  /* background: #d3dce6; */
}
.bg-purple-light {
  /*  background: #e5e9f2; */
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 5px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  /* clear: both */
}

.box-card {
  width: 350px;
  margin-top: 20px;
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>
